require('styles/normolize.css');
require('styles/index.scss')

import React from 'react';
import { NavLink} from 'react-router-dom'

function List(props) {
    let list = props.list
    const listItems = list.map((item,index) => {
      if(index === list.length-1){
        return <li key={index} className={props.class}>
          <span></span>
          <NavLink to={item.path} activeClassName="active" data-index={index}>
            <span></span>
            {item.name}
          </NavLink>
        </li>
      }
      return <li key={index} className={props.class}>
           <NavLink to={item.path} activeClassName="active"  data-index={index}>
            <span></span>
            {item.name}
          </NavLink>
      </li>
    })
    return (
      <ul className='list'>{listItems}</ul>
    )
}

function Search() {
  return (
    <div className='search'>
      <input placeholder="音乐/视频/电台/用户" className="input"></input>
    </div>
  )
}











class Header extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    const loginList = [
      {path:'', name:'手机号登录'},
      {path:'', name:'微信登录'},
      {path:'', name:'QQ登录'},
      {path:'', name:'新浪微博登录'},
      {path:'', name:'网易邮箱账号登录'}
      ];
    const mainList = [
      {path:'/discoverMusic', name:'发现音乐'},
      {path:'/myMusic', name:'我的音乐'},
      {path:'/friends', name:'朋友'},
      {path:'/shoping', name:'商城'},
      {path:'/music', name:'音乐'},
      {path:'/downLoad', name:'下载客户端'}
      ]
    return (
      <div className="header">
        <div className="content">
          <h1 className="logo">
            <a href="#">网易云音乐</a>
          </h1>
          <List list={mainList} class="listItem"></List>
          <div className="loginContent">
            <a className="login">登录</a>
            <List list={loginList} class='loginItem'></List>
          </div>
          <a className="videoContribute">视频投稿</a>
          <Search></Search>
        </div>
      </div>
    )
  }
}


export default Header;


